<template>
	<section>
		<el-col :span="24">
			<el-breadcrumb separator=">">
			  <el-breadcrumb-item :to="{ path: '/coursestatistics?id='+$route.query.id }">成绩统计</el-breadcrumb-item>
			  <el-breadcrumb-item >{{ListInfo.user.realName}}</el-breadcrumb-item>
			</el-breadcrumb>			
		</el-col>		
		<el-col :span="16" :offset="4">
			<h1 style="font-size:16px;font-weight: normal;">学生姓名：{{ListInfo.user.realName}}</h1>
			<div style="margin-bottom:10px;" class="clearfix">
				<h1 style="font-size:16px;font-weight: normal;float: left;">课程综合进度：</h1>
			    <div class="progress" style="width: 80%;float: left;margin: 16px 0;">
			      <span class="red"  v-bind:style="{width:ListInfo.completion+'%'}"><span>{{ListInfo.completion}}%</span></span>
			    </div>					
			</div>
			<el-collapse v-model="activeNames">
			  <el-collapse-item title="创业基础课程" name="1">
			    <div class="courselink" v-for="el in List" v-if="el.stageUnit.courseStage==0">
			    	<p v-on:click="changeopen(el)">{{el.stageUnit.name}}</p>
			    	<div style="margin-top: 20px;margin-left: 20px;" v-if="el.open==1">
			    		已完成<span style="color:red;">{{el.planNumber}}</span>个教案的查阅</br>
						已完成<span style="color:red;">{{el.videoNumber}}</span>个视频的播放</br>
						<span style="color:red;">{{isCommitted?'未完成作业的提交':'已完成作业的提交'}}</span></br>
			    	</div>
					<template >
					    <div class="progress">
					      <span class="green"  v-bind:style="{width:el.completion+'%'}"><span>{{el.completion}}%</span></span>
					    </div>					
					</template>				    	
			    </div>
		    
			  </el-collapse-item>
			  <el-collapse-item title="案例分析课程" name="2">
			    <div class="courselink" v-for="el in List"  v-if="el.stageUnit.courseStage==1">
			    	<p v-on:click="changeopen(el)">{{el.stageUnit.name}}</p>
			    	<div style="margin-top: 20px;margin-left: 20px;" v-if="el.open==1">
			    		已完成<span style="color:red;">{{el.planNumber}}</span>个教案的查阅</br>
						已完成<span style="color:red;">{{el.videoNumber}}</span>个视频的播放</br>
						<span style="color:red;">{{isCommitted?'未完成作业的提交':'已完成作业的提交'}}</span></br>
						已完成<span style="color:red;">{{el.drawingNumber}}</span>个图纸的学习</br>
			    	</div>
					<template >
					    <div class="progress">
					      <span class="green"  v-bind:style="{width:el.completion+'%'}"><span>{{el.completion}}%</span></span>
					    </div>					
					</template>				    	
			    </div>
			  </el-collapse-item>
			  <el-collapse-item title="沙盘推演课程" name="3">
			    <div class="courselink" >
			    	沙盘推演课程
					<template >
					    <div class="progress" v-if="ListInfo.courseTeam.isInferCommitted">
					      <span class="green"  style="width: 100%;"><span>100%</span></span>
					    </div>			
					    <div class="progress" v-if="!ListInfo.courseTeam.isInferCommitted">
					      <span class="green"  style="width: 0%;"><span>0%</span></span>
					    </div>						    
					</template>				    	
			    </div>
			  </el-collapse-item>
			  <el-collapse-item title="项目路演课程" name="4">
			    <div class="courselink">
			    	项目路演
					<template >
					    <div class="progress" v-if="ListInfo.courseTeam.isRoadCommitted">
					      <span class="green"  style="width: 100%;"><span>100%</span></span>
					    </div>	
					    <div class="progress" v-if="!ListInfo.courseTeam.isRoadCommitted">
					      <span class="green"  style="width: 0%;"><span>0%</span></span>
					    </div>						    
					</template>					    	
			    </div>
	
			  </el-collapse-item>
			</el-collapse>				
		</el-col>
	
	</section>
</template>

</template>
<script>
	import { courseStudent,courseTeam,courseone,coursestudentmark,courseStucontent,courseStuchieven} from '../../api/api';
	import echarts from 'echarts'
	export default {
		data() {
			return {
				coursebase:{
					Score:[],
					name:[],
				},
				activeNames:["1","2","3","4"],
				realName:"",
				totalScore:"",
				InferScore:[],
				OtherScore:[],
				List:[],
				ListInfo:{
					
				},
				quanzhonglist:[
	                {value:'', name:'个人成绩'},
	                {value:'', name:'小组成绩'},
	                {value:'', name:'课堂表现'},
	                {value:'', name:'课程进度'},
	               
	            ],
			}
		},	
		methods: {	
			//页面跳转
		    skip(link,id,row){
		        this.$router.push(
		        	{
		        		path:link,
		        		query:{
		        			id:id,
		        		}
		        	}
		        )
		        sessionStorage.setItem("course",JSON.stringify(row))
		    },	
			handleCurrentChange(val) {
				this.page = val;
				this.getList();
			},	
			changeopen:function(el){
				if(el.open==0){
					el.open=1
				}else{
					el.open=0
				}
			},
			//获取项目列表
			getList: function (type) {
				var _this=this;
				var params={courseId:this.$route.query.id,userId:this.$route.query.userid,pageSize:2000}
				//NProgress.start();
				courseStudent(params).then((res) => {
					if(res.list[0].courseTeam==null){
						res.list[0].courseTeam={};
						res.list[0].courseTeam.isInferCommitted=false;
						res.list[0].courseTeam.isRoadCommitted=false
					}
					this.ListInfo=res.list[0]
				});					
				courseStuchieven(params).then((res) => {
					$.each(res.studentUnits, function(e,value) {
						value.drawingNumber=0;
						value.planNumber=0;
						value.videoNumber=0;
						value.open=0;
						$.each(value.drawingSchedules, function(i,result) {
							if(result.isUsed){
								value.drawingNumber++
							}
						});
						$.each(value.planSchedules, function(i,result) {
							if(result.isUsed){
								value.planNumber++
							}
						});
						$.each(value.videoSchedules, function(i,result) {
							if(result.isUsed){
								value.videoNumber++
							}
						});						
						value.completion=Math.round(value.completion)
					});
					this.List = res.studentUnits;		
					
				});					
			},								
		},	
		mounted() {
			this.getList();
		}
	};

</script>
